<template>
<div>
  <div ref="Dom" class="Domoption" style="width: 930px; height: 730px;"></div>
  <div class="csscategory">
  <GetEchartcategory></GetEchartcategory>
  </div>
  </div>
</template>

<script>
import GetEchartcategory from "../piecherts/index";
import { getEchartsshuju } from "@/api/echartsbm/echartsbm";
export default {
  data() {
    return {
      major: null,
      bmsum: null,
    };
  },
 components: {
    GetEchartcategory
  },

  mounted() {
    // this.getEchartsshuju();
    //获取Dom节点
    let chartDom = this.$refs.Dom;
    //初始化echarts实例
    let myChart = this.$echarts.init(chartDom);
    //绘制图标
    let option;
    option = {
      legend: {
        top: "bottom",
        right: 80,

      },
      title: {
        text: "1、各专业报名数据统计信息",
        subtextStyle: {
          left: "center", //主副标题的水平位置
          top: "center" //主副标题的垂直位置
        },
        x: "left",
        top: 50,
        left: 380,
        textStyle: {
          fontSize: 16,
          color: "#0069f9"
        }
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          type: "pie",
          radius: [60, 200],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
           label: {
                normal: {
                    show: true,
                    formatter: '{b}({d}%)'      // 显示百分比
                }
            },
          data: [],
        },
      ],
    };



   getEchartsshuju().then((response) => {
        // console.log(response.data);
        response.data.forEach((item) => {
          option.series[0].data.push({ name: item.major, value: item.bmsum });
        });
        // console.log(option)
        option && myChart.setOption(option);
      });


  },
};
</script>

<style>
.Domoption{
  text-align: center;
   margin: 0 auto;

}
.csscategory {
  position: relative;
  text-align: center;
  margin: 60px auto;
  float: left;
  left: 210px;
}
</style>
